<template>
  <com-header title="地址管理"></com-header>
  <div v-for="(item, index) in list" :key="index">
    <Address :item="item" @update="getList"></Address>
  </div>
  <div class="padded-10">
    <van-button
      round
      type="primary"
      size="large"
      @click="addAddress('添加地址')"
      >添加地址</van-button
    >
  </div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/stores/store";
import type { IAddress } from "@/types";
export default defineComponent({
  components: {
    Address: defineAsyncComponent(() => import("./components/address.vue")),
  },
  setup() {
    const router = useRouter(),
      list = ref<IAddress>(useStore().state.addressData.list);
    const addAddress = (title: string) => {
      router.push({
        name: "editAddress",
        query: {
          title: title,
        },
        params: {
          id: 0,
        },
      });
    };

    const getList = () => {
      list.value = useStore().state.addressData.list;
    }
    

    return {
      addAddress,
      getList,
      list
    };
  },
});
</script>
